<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>常见的鼠标事件</title>
    <style>
    </style>
</head>

<body>
    <img src="../../../天使.jpg" style="width: 30px;height: 30px;position: absolute;" alt="">
</body>
<script>
    /* 
    e.clientx  相对可视窗口
    e.clienty  相对可视窗口

    e.pagex 相对文档页面
    e.pagey 相对文档页面
    */
    document.addEventListener('click', function (e) {
        console.log(e.clientX, e.clientY, e.which)
    })
  let img=  document.querySelector('img')
//   img.style.top='100px'
    
    document.addEventListener('mousemove',(e)=>{
      
      let x=  e.clientX;
      let y= e.clientY;
        img.style.top=(y-15)+'px'
        img.style.left=(x-15)+'px'
        
    })
    
</script>

</html>